import React,{useEffect,useState} from 'react'
import { Outlet, NavLink } from 'react-router-dom'
import { Tabbar, Button } from 'react-vant';
import { FriendsO, HomeO,UnderwayO,  SettingO } from '@react-vant/icons';

export default function Home() {
    const [value, setValue] = useState('');
    return (
        <div>
           <header className='header'>
                
            </header>
            <main className='main'>
                <Outlet />

            </main>
            <footer className='footer'>
                <div className='demo-tabbar'>
                    <Tabbar>
                        <Tabbar.Item icon={<HomeO />}>
                            <NavLink to='/home/index'>首页</NavLink>
                        </Tabbar.Item>

                        <Tabbar.Item icon={<UnderwayO  />}>
                            <NavLink to='/home/car'>购物车</NavLink>
                        </Tabbar.Item>

                        <Tabbar.Item icon={<FriendsO />}>
                            <NavLink to='/home/class'>分类</NavLink>
                        </Tabbar.Item>

                        <Tabbar.Item icon={<SettingO />}>
                            <NavLink to='/home/my'>我的</NavLink>
                        </Tabbar.Item>
                    </Tabbar>
                </div>
            </footer>
        </div>
    )
}
